import { ref } from 'vue'
import { onBeforeRouteUpdate, useRouter, useRoute } from 'vue-router'
import { useCookies } from '@vueuse/integrations/useCookies'

// 封装tagList里面的方法
export function useTabList() {
	const route = useRoute()
	const router = useRouter()
	const cookie = useCookies()

	// 根据当前路由判断显示哪个 tab 标签
	const activeTab = ref(route.fullPath)

	// tab 标签栏数据
	const tabList = ref([
		{
			// 禁止删除的默认tab标签
			title: '首页',
			path: '/',
		},
	])

	// 初始化标签栏数据
	const initTabList = () => {
		let tabs = cookie.get('tabList')
		if (tabs) {
			tabList.value = tabs
		}
	}
	initTabList()

	// 添加标签方法
	const addTab = (tab) => {
		// 判断当前路由是否已经在 tabList 中存在
		let noTab = tabList.value.findIndex((t) => t.path == tab.path) == -1
		if (noTab) {
			tabList.value.push(tab)
		}

		// 存入cookie，防止刷新后丢失
		cookie.set('tabList', tabList.value)
	}

	// 更新路由前，把路由信息添加到标签栏
	onBeforeRouteUpdate((to, from) => {
		// 添加的同时，还需要高亮显示
		activeTab.value = to.path

		addTab({
			title: to.name,
			path: to.path,
		})
	})

	// 切换tab标签
	const changeTab = (t) => {
		activeTab.value = t
		router.push(t)
	}

	// 删除tab标签
	const removeTab = (t) => {
		let tabs = tabList.value
		let at = activeTab.value

		// 判断当前选中的路由 是否等于 需要关闭的路由
		if (at == t) {
			tabs.forEach((tab, index) => {
				if (tab.path == t) {
					// 匹配完整tabList中的数据，是否与当前关闭的路由相等
					// 相等的时候就寻找左右下标的路由数据
					const nextTab = tabs[index + 1] || tabs[index - 1]
					if (nextTab) {
						// 左右路由有其中任意一个的时候，就把该路由高亮显示
						at = nextTab.path
					}
				}
			})
		}

		activeTab.value = at
		// 过滤掉已关闭的路由
		tabList.value = tabList.value.filter((tab) => tab.path != t)
		cookie.set('tabList', tabList.value)
	}

	// 删除其他、删除全部 tab标签
	const handleCommand = (c) => {
		if (c === 'other') {
			// 删除其他
			// 除了首页和当前选中页标签之外，其他标签全部清空
			// 过滤出对应的标签即可
			tabList.value = tabList.value.filter((t) => t.path == '/' || t.path == activeTab.value)
		} else if (c === 'all') {
			// 删除全部
			// 除了首页之外的所有标签全部清空
			tabList.value = [
				{
					title: '首页',
					path: '/',
				},
			]
			activeTab.value = '/'
		}

		// 重新设置cookie的值
		cookie.set('tabList', tabList.value)
	}

  return {
    activeTab,
    tabList,
    changeTab,
    removeTab,
    handleCommand
  }
}
